import React, { Component } from 'react';
let count = 0;
class Anli extends Component {
    constructor() {
        super();
        this.state = {
            count: count
        }
    }
    componentWillMount() {
        this.setState({
            count: ++count,
        })
        this.setState({
            count: ++count,
        })
        setTimeout(() => {
            this.setState({
                count: ++count,
            })
            this.setState({
                count: ++count,
            })
        }, 1000)
    }
    componentDidMount() {
        this.button2.addEventListener("click", this.onClick3.bind(this), false)
    }
    onClick1(info) {
        console.log(info, count, this.state.count)
        for (let i = 0; i < 3; i++) {
            this.setState({
                count: ++count
            })
        }
        console.log(this.state.count, "btn1")
    }
    onClick2(info) {
        console.log(info, count, this.state.count)
        setTimeout(() => {
            for (let i = 0; i < 3; i++) {
                this.setState({
                    count: ++count
                })
            }
            console.log(this.state.count, "btn2")
        }, 0)
    }
    onClick3(info) {
        console.log(info, count, this.state.count)
        for (let i = 0; i < 3; i++) {
            this.setState(() => {
                return {
                    count: ++count
                }
            })
        }
        console.log(this.state.count, "btn3")
    }
    render() {
        console.log(this.state.count, "render")
        return (
            <div>
                <button type='button' ref={node => this.button = node} onClick={this.onClick1.bind(this, "React事件")}>生成新计数1</button>
                <button type='button' ref={node => this.button1 = node} onClick={this.onClick1.bind(this, "React事件")}>生成新计数2</button>
                <button type='button' ref={node => this.button2 = node}>生成新计数3</button>
                <div>count:{this.state.count}</div>
            </div>
        );
    }
}

export default Anli;